import {
  cateList,
  addCate
} from '@/api/cate'
export default {
  data() {
    return {
      // 分类数据
      cateList: [],
      // 列属性
      columns: [{
        label: '分类名称',
        prop: 'cat_name',
        width: '400px'
      }, {
        label: '是否有效',
        // 表示将当前列定义为模板列
        type: 'template',
        // 表示当前这一列的模板名称
        template: 'isOk'
      }, {
        label: '排序',
        // 表示将当前列定义为模板列
        type: 'template',
        // 表示当前这一列的模板名称
        template: 'order'
      }, {
        label: '操作',
        // 表示将当前列定义为模板列
        type: 'template',
        // 表示当前这一列的模板名称
        template: 'opt'
      }],
      // 查询条件
      queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      // 总记录数
      total: 0,
      // 控制添加分类的对话框的显示和隐藏
      addCateDialogVisible: false,
      // 添加的表单数据
      addCateForm: {
        // 分类名称
        cat_name: '',
        // 添加分类的父级id，0则表示父级为0.添加一级分类
        cat_pid: 0,
        // 添加分类的等级，0则表示添加一级分类
        cat_level: 0
      },
      // 添加的验证规则
      addCateFormRules: {
        // 验证规则
        cat_name: [{
          required: true,
          message: '请输入分类名称',
          trigger: 'blur'
        }]
      },
      // 选中的父级菜单的值
      selectedKeys: [],
      // 配置级联菜单中数据如何展示
      cascaderProps: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children',
        expandTrigger: 'hover'
      },
      // 级联菜单的数据
      parentCateList: []
    }
  },
  created() {
    this.getCateList()
  },
  methods: {
    // 获取分页数据
    async getCateList() {
      const {
        meta,
        data
      } = await cateList(this.queryInfo)
      if (meta.status !== 200) {
        return this.$message.error('获取数据失败')
      }
      this.cateList = data.result
      this.total = data.total
    },
    // 监听分页的动作
    handleSizeChange(size) {
      this.queryInfo.pagesize = size
      this.getCateList()
    },
    handleCurrentChange(page) {
      this.queryInfo.pagenum = page
      this.getCateList()
    },
    // 显示添加分类的对话框事件
    async showAddCateDialog() {
      // 获取级联菜单的数据(1,2级的数据)
      const {
        meta,
        data
      } = await cateList({
        type: 2
      })
      if (meta.status !== 200) {
        return this.$message.error('获取数据失败')
      }
      this.parentCateList = data
      this.addCateDialogVisible = true
    },
    // 提交添加
    addCate() {
      this.$refs.addCateFormRuleForm.validate(async valid => {
        if (!valid) return
        const {
          meta
        } = await addCate(this.addCateForm)
        if (meta.status !== 201) return this.$message.error('添加失败')
        this.$message.success('添加分类成功')
        this.getCateList()
        this.addCateDialogVisible = false
      })
    },
    // 监听添加对话框的关闭事件
    addCateDialogClosed() {
      // 当关闭添加分类对话框时，重置表单
      this.$refs.addCateFormRuleForm.resetFields()
      this.selectedKeys = []
      this.addCateForm.cat_pid = 0
      this.addCateForm.cat_level = 0
    },
    // 级联菜单选线改变时触发的事件
    parentCateChange() {
      // 获取选中结果
      // console.log(this.selectedKeys)
      if (this.selectedKeys.length > 0) {
        // 则将数组中的最后一项设置为父级分类
        this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]
        // level也要跟着发生变化
        this.addCateForm.cat_level = this.selectedKeys.length
        // 选中了父级后，让级联菜单隐藏
        this.$refs.cateHandle.dropDownVisible = false
      } else {
        this.addCateForm.cat_pid = 0
        this.addCateForm.cat_level = 0
      }
    },
    // 显示修改的对话框
    showEditDialog(id) {

    },
    // 删除分类
    removeCateById(id) {

    }
  }

}
